<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="审易A8(For all platform)" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>审易A8</title>

    <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script src="js/dwz.min.js" type="text/javascript"></script>
    <script src="js/dwz.regional.zh.js" type="text/javascript"></script>
    <script src="js/jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            DWZ.init("dwz.frag.xml", {});
        });

        function validateCallback(form) {
            var $form = $(form);
            var params = $form.serializeArray();
            if (!$form.valid()) {
                window.api.alert('数据库信息未填写完整，请填写完整');
                return false;
            }
            // 0: {name: 'serverIp', value: ''}
            // 1: {name: 'serverPort', value: ''}
            // 2: {name: 'dbname', value: ''}
            // 3: {name: 'user', value: ''}
            // 4: {name: 'password', value: ''}
            var newConfig = {};
            for (var i = 0, j = params.length; i < j; i++) {
                var param = params[i];
                newConfig[param.name] = param.value;
            }
            console.log(newConfig);

            return;
        }
    </script>
    <style type="text/css">
        .dbstlabel {
            text-align: right;
        }

        .alphanumeric {
            float: left;
        }

        label.error {
            display: none !important;
        }
    </style>
</head>

<body style="user-select: none; overflow: hidden;">
    <div class="pageContent">

        <form method="post" class="pageForm required-validate" onsubmit="return validateCallback(this)">
            <div class="pageFormContent" layoutH="58">

                <div class="unit">
                    <label class="dbstlabel">数据库服务IP：</label>
                    <input type="text" name="host" id="host" size="30" minlength="6" maxlength="20"
                        class="required alphanumeric" />
                </div>
                <div class="unit">
                    <label class="dbstlabel">端口：</label>
                    <input style="width: 80px;" type="number" id="port" name="port" size="5"
                        class="required alphanumeric" />
                </div>
                <div class="unit">
                    <label class="dbstlabel">数据库名称：</label>
                    <input type="text" name="database" id="database" size="15" class="required alphanumeric" />
                </div>
                <div class="unit">
                    <label class="dbstlabel">用户名：</label>
                    <input type="text" name="user" id="user" size="15" class="required alphanumeric" />
                </div>
                <div class="unit">
                    <label class="dbstlabel">密码：</label>
                    <input type="password" name="password" id="password" size="15" class="required alphanumeric" />
                </div>
            </div>
            <div class="formBar">
                <ul>
                    <li>
                        <div class="buttonActive">
                            <div class="buttonContent"><button type="submit">测试连接</button></div>
                        </div>
                    </li>
                    <li>
                        <div class="button">
                            <div class="buttonContent"><button type="button" class="close"
                                    onclick="window.api.closeModal()">取消</button></div>
                        </div>
                    </li>
                </ul>
            </div>
        </form>

    </div>
</body>

</html>